<template>
<ul>
    <li v-for="todo in list" :key="todo.id">
        <slot name="todo" :todo="todo">
            <span @click='handleClickDeleteThis(todo.id)'>{{todo.txt}}</span>
        </slot>            
    </li>
</ul>
</template>

<script>
export default {
    name: "todos",
    props: {
        todos: Array
    },
    data() {
        return {
            list: []
        }
    },
    created() {
        this.list = this.todos
    },
    methods: {
        handleClickDeleteThis(id) {
            this.list.forEach((item, index, arr) => {
                if(item.id === Number(id)) {
                    let index = arr.indexOf(item)
                    arr.splice(index, 1)
                }
            });
            console.log(this.list)
            // this.$emit('update:todos', this.list)
        }
    },
}
</script>
